﻿<!--PlanPool 号池计划 Vue组件定义 -->
<!--X-Template 组件模板-->
<!--树形下拉选择器-->
<script type="text/x-template" id="plan-pool-template">
        <div :class="{planPoolContainer:true,planDisabled:planDisabled}"   v-on:dblclick="dbClickHandler" v-on:mouseenter="mouseenterHandler" v-on:mouseleave="mouseleaveHandler">
         <!--有号池计划-->
             <div class="container-inner" v-if="planPool" >
                 <div class="plan-pool-selector" >
                      <el-checkbox v-model="selected" v-on:change="selectedChange"></el-checkbox>
                 </div>
                 <div class="plan-pool">
                          <div>
                              <span class="max-count">{{planPool.maxCount}}</span>
                          </div>
                          <div v-if="planPool.allowOverFlow" class="allow-over" style="opacity:0.5; background-color:#67C23A;width:10px;height:10px;margin-left:15px;border-radius:100%;"></div>
                 </div>
                 <div class="plan-pool-tools" v-show="mouseOver" >
                     <el-button  circle size="mini" icon="el-icon-edit"  v-on:click="editPlanPool" ></el-button>
                     <el-button type="danger" circle size="mini" icon="el-icon-delete" v-on:click="deletePlanPool"  style="margin-left: -5px;
    margin-right: 4px;"></el-button>
                 </div>
            </div>
        <!--号池计划不存在 -->
            <div class="no-plan-pool" v-if="!planPool">
                <el-button  size="mini" icon="el-icon-plus"  v-on:click="createPlanPool" v-show="mouseOver"  circle ></el-button>
            </div>
    </div>
</script>
<script>
    var PlanPoolComponent= {
          props: {
                scheduleId:String,
                dayInWeek:Number,
                timeIntervalId:String,
                deletePermission:Boolean, // 删除权限
                editPermission:Boolean,   // 编辑权限
                refName:String            // 引用名称
          },
          template:'#plan-pool-template',  // 组件模板
          data:function() {
            return {
                selected:false,
                planPool:null,
                mouseOver:false,
                planDisabled:false
                // {
                //     id:null,
                //     isActive:null,
                //     timeIntervalId:null,
                //     maxCount:0,
                //     allowOverFlow:false,
                //     overFlowCount:0,
                //     scheduleId:null,
                //     dayInWeek:null
                // }
            }
          },
          methods: {
              // 选中改变
              selectedChange(val){
                  var cvm = this;
                  cvm.$emit('selected-change',{value:val,
                                               id:cvm.planPool.id,
                                               refName:cvm.refName});
              },

              // 删除号池计划
              deletePlanPool(){
                  var cvm = this;
                  cvm.$emit('delete',{id:cvm.planPool.id,refName:cvm.refName});
              },

              // 编辑
              editPlanPool(){
                  var cvm = this;
                  cvm.$emit('edit',{id:cvm.planPool.id,refName:cvm.refName});
              },

              // 新建
              createPlanPool(){
                  var cvm =this;
                  cvm.$emit('create',{
                    dayInWeek:cvm.dayInWeek,
                    timeIntervalId:cvm.timeIntervalId,
                    scheduleId:cvm.scheduleId,
                    refName:cvm.refName
                  });
              },

              // 双击事件处理程序
              dbClickHandler(){
                  var cvm =this;
                  if(cvm.planPool){
                      cvm.$emit('edit',{id:cvm.planPool.id,refName:cvm.refName});
                  }
                  else{
                      cvm.$emit('create',{
                        dayInWeek:cvm.dayInWeek,
                        timeIntervalId:cvm.timeIntervalId,
                        scheduleId:cvm.scheduleId,
                        refName:cvm.refName
                      })
                  }
              },

              // 鼠标移入
              mouseenterHandler(){
                  var cvm= this;
                  cvm.mouseOver = true;
              },

              // 鼠标移出
              mouseleaveHandler(){
                  var cvm= this;
                  cvm.mouseOver = false;
              },

              // 获取号池计划
              loadData(){
                  var cvm = this;
                  return new Promise(resolve=>{
                        abp.ajax({
                            type:'get',
                            url:`/api/plan-pool/get-table-plan-pool?sid=${cvm.scheduleId}&weekDay=${cvm.dayInWeek}&intervalId=${cvm.timeIntervalId}`
                        }).then(res=>{
                                    if(res.code===0){
                                        if(res.data.hasPlanPool){
                                            cvm.planPool=res.data.planPool;
                                            cvm.planDisabled =!res.data.planPool.isActive;
                                        }else{
                                            cvm.planPool=null;
                                            cvm.planDisabled=false;
                                        }
                                    }
                        })
                  });
              }
          },
          created(){
              var cvm = this;
              cvm.loadData();
          }
     };
</script>
<style>
    .planPoolContainer {
        width: 100%;
        height: 50px;
        position:relative;
        display:flex;
    }

        .planPoolContainer .container-inner {
            height: 100%;
            width: 100%;
            display:flex;
            flex-direction:row;
            align-items:center;
            justify-content:center;
        }

            .planPoolContainer .container-inner .plan-pool-selector
            {
                position:absolute;
                top:0px;
                left:3px;
            }

            .planPoolContainer .container-inner .plan-pool{
                text-align:start;
                padding-left:40px;
                width:100%;
                display:flex;
                align-items:center;
            }

            .planPoolContainer .container-inner .plan-pool-tools{
                right:0px;
                display:flex;
                gap:10px;
            }

            .planPoolContainer .no-plan-pool{
                display:flex;
                align-items:center;
                justify-content:flex-start;
                padding-left:10px;
           }

    .planDisabled {
                background-color: #909399;
                color:white;
    }

</style>